<template>
  <div class="index-container">
    <div :style="'height:' + split_height + 'px'">
      <Split v-model="split" mode="vertical" on-moving="split_change">
        <div slot="top" class="demo-split-pane">
          <el-row>
            <template>
              <Object ref="object" :add_statu="true" :search_statu="true" :table_height="parent_height" @rowClick="getFiledsAndButtons"/>
            </template>
          </el-row>
        </div>
        <div slot="bottom" class="demo-split-pane">
          <el-row style="margin-top:5px">
            <template>
              <FieldAndButton ref="fab" :tableHeight="son_height" :objects="[]" />
            </template>
          </el-row>
        </div>
      </Split>
    </div>
  </div>
</template>

<script>
  import FieldAndButton from '@/views/coder/components/fieldAndButton'
  import Object from '@/views/coder/components/object'

  export default {
    name:'Data',
    components: {
      Object,
      FieldAndButton
    },
    data() {
      return {
        split: 0.4,
        split_height: 0,
        parent_height: 0,
        son_height: 0,
        fullHeight: document.documentElement.clientHeight - 250,
      }
    },
    watch: {
      split: function() {
        this.split_height = this.fullHeight - 85
        this.parent_height = this.split_height * this.split
        this.son_height = this.split_height * (1 - this.split)
      }
    },
    created() {
      this.split_height = this.fullHeight - 85
      this.parent_height = this.split_height * this.split
      this.son_height = this.split_height * (1 - this.split)
    },
    methods: {
      getFiledsAndButtons(row){
        this.$refs.fab.getData(row.no)
      }
    }
  }
</script>

<style>
</style>
